<template>
  <div class="cates_search">
    <div class="input">
      <input v-model="kw" type="text" placeholder="搜索关键字" />
      <button style="padding: 0 10px" @click="setModel">{{ curModel }}</button>
    </div>
    <div class="sorts">
      <div @click="sort('default')">默认</div>
      <div @click="sort('price')">价格&lt;{{ priceOrder }}&gt;</div>
      <div @click="sort('sale')">销量&lt;{{ saleOrder }}&gt;</div>
      <div @click="sort('new')">新品</div>
    </div>
    <div class="search_list">
      <div
        :class="{ sl_item: true, sl_item_row: !isColumn }"
        v-for="s in searchs"
        :key="s.id"
      >
        <img class="sl_item_img" :src="s.image" alt="" />
        <div class="sl_item_info">
          <h3>{{ s.store_name }}</h3>
          <p>￥{{ s.price }}</p>
          <span>已售{{ s.sales }}{{ s.unit_name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Vue2FxhCatesSearch",
  data() {
    return {
      searchs: [],
      kw: "",
      curModel: "列",
      isColumn: true,
      priceOrder: "默认",
      saleOrder: "默认",
    };
  },
  created() {
    this.kw = this.$route.query.kw;
    // https://demo26.crmeb.net/api/products?sid=0&keyword=%E6%89%8B%E6%9C%BA&priceOrder=&salesOrder=&news=0&page=1&limit=20&cid=0&productId=
    this.$axios
      .get(
        `https://demo26.crmeb.net/api/products?sid=0&keyword=${this.kw}&priceOrder=&salesOrder=&news=0&page=1&limit=20&cid=0&productId=`
      )
      .then(({ data }) => {
        this.searchs = data.data;
      });
  },
  methods: {
    setModel() {
      this.isColumn = !this.isColumn;
      if (this.isColumn) this.curModel = "列";
      else this.curModel = "行";
    },
    sort(val) {
      let paramsOptions = {
        sid: 0,
        keyword: this.kw,
        priceOrder: "",
        salesOrder: "",
        news: 0,
        page: 1,
        limit: 20,
        cid: 0,
        productId: "",
      };
      switch (val) {
        case "price":
          if (this.priceOrder == "默认") {
            this.priceOrder = "asc";
          } else if (this.priceOrder == "asc") {
            this.priceOrder = "desc";
          } else {
            this.priceOrder = "默认";
          }
          paramsOptions.priceOrder =
            this.priceOrder == "默认" ? "" : this.priceOrder;
          break;
        case "sale":
          if (this.saleOrder == "默认") {
            this.saleOrder = "asc";
          } else if (this.saleOrder == "asc") {
            this.saleOrder = "desc";
          } else {
            this.saleOrder = "默认";
          }
          paramsOptions.salesOrder =
            this.saleOrder == "默认" ? "" : this.saleOrder;
          break;
        case "new":
          paramsOptions.news = 1;
          break;
        default:
          break;
      }
      this.$axios
        .get("https://demo26.crmeb.net/api/products", {
          params: paramsOptions,
        })
        .then(({ data }) => {
          this.searchs = data.data;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.cates_search {
  height: calc(100vh - 81px);
  overflow-y: scroll;
  .input {
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: yellow;
  }
  .sorts {
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: lightblue;
  }
  .search_list {
    background-color: red;
    height: calc(100vh - 181px);
    overflow-y: scroll;
    width: 100vw;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .sl_item {
      flex-shrink: 0;
      background-color: white;
      width: 45%;
      margin: 10px 0;
      padding: 5px 10px;
      box-sizing: border-box;
      .sl_item_img {
        width: 140px;
        height: 140px;
      }
      .sl_item_info {
        h3 {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .sl_item_row {
      width: 100vw !important;
      display: flex;
      align-items: center;
      .sl_item_img {
        width: 70px !important;
        height: 70px !important;
      }
      .sl_item_info {
        h3 {
          width: 280px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
